<template>
  <div class="tab-container">
    <keep-alive :include="/.+keepAlive$/">
      <router-view></router-view>
    </keep-alive>
    <tabbar class="tab-bottom">
      <tabbar-item
        v-for="(item,index) in tabData"
        :key="item.icon"
        :badge="item.badge==false?'':item.badge>99?'99':item.badge"
        :selected="item.selected"
        @on-item-click="goLink(item)"
      >
        <img slot="icon" :src="item.icon" />
        <img slot="icon-active" :src="item.activeIcon" />
        <span slot="label" v-text="item.val"></span>
      </tabbar-item>
    </tabbar>
  </div>
</template>
<style lang="less"  type="text/less" scoped>
.tab-container {
  height: 100%;
}
.tab-bottom-placeholder {
  height: 60px;
}
.tab-bottom {
  position: absolute;
  bottom: 0px;
  left: 0px;
  /deep/ .weui-tabbar__item {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 5px 0 0;
    font-size: 0;
    color: #999999;
    text-align: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /deep/ .weui-tabbar__label {
      vertical-align: middle;
      text-align: center;
      color: #999999;
      font-size: 10px;
      line-height: normal;
    }
    .vux-badge {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: inherit;
    }
  }
}
</style>

<script>
import { Tabbar, TabbarItem, TransferDom } from "vux";
import { Storage } from "../service/storage";

export default {
  name: "tab_keepAlive",
  components: {
    Tabbar,
    TabbarItem,
  },
  directives: {
    TransferDom,
  },
  data() {
    return {
      from: false,
      shopInfo: {},
      badge: {},
      routeName: this.$route.name,
    };
  },
  computed: {
    tabData() {
      let list = [
        {
          val: "首页",
          icon: require("../assets/img/cart/tab-icon3.png"),
          activeIcon: require("../assets/img/cart/tab-icon3h.png"),
          /*url: '/purchase/storePage',*/
          url: "/index",
          erp: true,
          badge: false,
          selected: this.routeName === "goodIndex",
        },
        {
          val: "分类",
          icon: require("../assets/img/category.png"),
          activeIcon: require("../assets/img/category-active.png"),
          url: "/purchase/storePage",
          badge: false,
          selected: this.routeName === "StorePage",
        },
        {
          val: "收藏列表",
          icon: require("../assets/img/cart/tab_often@2x.png"),
          activeIcon: require("../assets/img/cart/tab_often_pre@2x.png"),
          url: "/collect",
          badge: false,
          selected: this.routeName === "goodCollect",
        },
        /*{
            val: '常购清单',
            icon: require('../assets/img/cart/tab_often@2x.png'),
            activeIcon: require('../assets/img/cart/tab_often_pre@2x.png'),
            url: '/purchase/usuallyBuyList',
            badge: false,
            selected: this.routeName === 'UsuallyBuyList'
          },*/
        {
          val: "购物车",
          icon: require("../assets/img/cart/tab-icon2.png"),
          activeIcon: require("../assets/img/cart/tab-icon2h.png"),
          url: "/cart",
          badge: this.badge["cart"] || "0",
          selected: this.routeName === "Cart",
        },
        {
          val: "我的订单",
          icon: require("../assets/img/cart/tab-icon1.png"),
          activeIcon: require("../assets/img/cart/tab-icon1h.png"),
          url: "/purchase/myPurchase",
          badge: false,
          selected: this.routeName === "MyPurchase",
        },
      ];
      return list.filter(
        (item) => item.erp !== true || this.shopInfo.erpStatus == 1
      );
    },
  },
  activated(){
    this.updateCart();
    this.init()
  },
  created() {
    this.$root.eventHub.$on("updateCart", (data) => {
      this.updateCart();
    });
    this.$root.eventHub.$on("oneMoreOrder", (data) => {
      this.updateCart();
      this.goLink({ url: "/cart" });
      // this.selectByIndex(2);
    });
    if (this.$fromApp(this)) {
      this.from = true;
    }
  },
  methods: {
    init() {
      //获取经销商信息
      this.$ajax.get(
        "common/distributor/info",
        (res2) => {
          if (res2.code == "200") {
            this.shopInfo = res2.data;
          }
        },
        { distributorId: this.$route.query.id }
      );
    },
    //更新购物车数量
    updateCart() {
      if (
        Storage.get("token") != null &&
        Storage.get("token") != null &&
        this.$route.query.id != null &&
        this.$route.query.id
      ) {
        this.$ajax.get(
          "replenish/shopping_cart/num",
          (res) => {
            // console.log("====nums",res);

            if (res.code == 200) {
              this.$set(this.badge, "cart", res.data.toString());
              // this.badge['cart'] = res.data.toString()
              // this.tabData[3].badge = res.data.toString();
            } else {
              this.$vux.toast.text(res.msg, "center");
            }
          },
          { sellerId: this.$route.query.id }
        );
      }
    },
    goLink(item, index) {
      if (this.from) {
        // if (index == 0) {
        //   var id = this.$route.query.id?this.$route.query.id:this.$route.query.sellerId
        //   this.$callJava({
        //     old: {url:this.$webUrl+"purchase/storePage?from=app&id="+id + '&zeroSaleState=' + 0+'&fromManage=1'},
        //     new: {url:this.$webUrl+"index?from=app&id="+id + '&zeroSaleState=' + 0+'&fromManage=1'}
        //   })
        //   return
        // }

        this.$router.replace({
          path: item.url,
          query: {
            id: this.$route.query.id
              ? this.$route.query.id
              : this.$route.query.sellerId,
            from: "app",
          },
        });
      } else {
        this.$router.replace({
          path: item.url,
          query: {
            id: this.$route.query.id
              ? this.$route.query.id
              : this.$route.query.sellerId,
          },
        });
      }
    },
    selectByIndex(index) {
      var tabData = [...this.tabData];
      console.log("tabData", this.tabData);
      for (var i = 0; i < this.tabData.length; i++) {
        /*if (index > 4) {
            console.log(123123123, index)
            tabData[i].selected = false;
            continue;
          }*/
        if (i == index) {
          this.tabData[i].selected = true;
        } else {
          this.tabData[i].selected = false;
        }
      }
      // this.$set(this.tabData);
      this.tabData = tabData;
    },
  },

  watch: {
    $route(to, from) {
      console.log("to", to);
      /*if (to.path == '/purchase/storePage') {*/
      // if (to.path == '/index') {
      //   this.selectByIndex(0);
      // /*} else if (to.path == '/purchase/usuallyBuyList') {*/
      // } else if (to.path == '/collect') {
      //   this.selectByIndex(1);
      // } else if (to.path == '/cart') {
      //   this.selectByIndex(2);
      // } else if (to.path == '/purchase/myPurchase') {
      //   this.selectByIndex(3);
      // } else {
      //   this.selectByIndex(4);
      // }
      this.routeName = this.$route.name;
      // var tabData = this.tabData;
      // for (let i = 0; i < tabData.length; i++) {
      //   if (to.path == tabData[i]["url"]) {
      //     this.selectByIndex(i);
      //     break;
      //   }
      // }
    },
  },
};
</script>
